<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="renderer" content="webkit">
    <title>呼叫云</title>
    <link rel="shortcut icon" href="../img/logox_circle.png">
	<link rel="stylesheet" href="../css/modal_style.css">
    <link rel="stylesheet" href="../css/pintuer.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="../css/jquery.searchableSelect.css">
    <script src="../js/jquery-1.11.0.min.js"></script> 
    <script src="../js/config.js"></script>
	<script type="text/javascript" charset="utf-8" src="../js/jquery.leanModal.min.js"></script>
	<script src="../js/pintuer.js"></script>
	<script src="../js/jquery.searchableSelect.js"></script>
	<script>
		$(function(){
			$('#recharge').leanModal({ top: 110, overlay: 0.45, closeButton: ".hidemodal" });
			
			$("#account").click(function(){
				$("#accountAlert").css("visibility","hidden");
				$("#addPayRecord").removeAttr("disabled");
			});
			$("#payChannel").click(function(){
				$("#payChannelAlert").css("visibility","hidden");
				$("#addPayRecord").removeAttr("disabled");
			});
			getAllUserList();
		});
		//隐藏提示
		function hiddenDiv(){
			$("#userAlert").css("visibility","hidden");
			$("#addPayRecord").removeAttr("disabled");
		}
		//获取用户列表
		function getAllUserList(){
			$.ajax({
				 url:"getAllUserList",
				 type: "get",
		         data:{
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == '1'){
		        	 	var userList = data.userList;
		        	 	for(var i=0;i<userList.length;i++){
		        	 		$("#userID").append("<option value='"+userList[i].userID+"'>"+userList[i].loginName+"</option>");
		        	 	}
		        	 	$("#userID").searchableSelect();
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
		}
		//充值
		function addPayRecord(){
			$("#addPayRecord").attr("disabled","disabled");
			var ok1=false;
			var ok2=false;
			var ok3=false;
			
			var userID = $("#userID").val();
			if(userID!=""){
				ok1 = true;
			}else{
				$("#userAlert").css("visibility","");
			}
			var account = $("#account").val();
			if(account!=""){
				ok2 = true;
			}else{
				$("#accountAlert").css("visibility","");
			}
			var payChannel = $("#payChannel").val();
			if(payChannel!=""){
				ok3 = true;
			}else{
				$("#payChannelAlert").css("visibility","");
			}
			
			if(ok1 && ok2 && ok3){
				$.ajax({
				 url:"addPayRecord",
				 type: "get",
		         data:{
		         	userID:userID,
		         	account:account,
		         	payChannel:payChannel
		         },
		         dataType: "json",
		         success:function(data){
		        	 if(data.flag == '1'){
		        	 	alert("充值成功");
		        	 	window.location.reload();//刷新当前页面.
		        	 }
		         },
		         error:function(data){
		        	 console.log(data);
		         }
			});
            }
		}
	</script>
</head>

<body>
	<div class="panel admin-panel">
			<div class="panel-head"><strong>用户充值</strong></div>
			<div style="float:left;width:100%;padding-left:30px;padding-top:20px;">
                <div style="float:left;padding-top:5px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;用户名：</strong></div>
                <div style="float:left;" onclick="hiddenDiv()">
					<select class="input" style="" id="userID" name="userID">
						<option value="">请选择用户</option>
					</select>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="userAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请选择用户！</div>
                </div>
            </div>
			<div style="float:left;width:100%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;金额：</strong></div>
                <div style="float:left;">
					<input type="number" style="width:200px;" class="input" id="account" name=account"" placeholder="请填写金额"/>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="accountAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请填写充值金额！</div>
                </div>
            </div>
			<div style="float:left;width:100%;padding-left:30px;">
                <div style="float:left;padding-top:5px;"><strong>支付渠道：</strong></div>
                <div style="float:left;">
					<select class="input" style="width:200px;" id="payChannel" name="payChannel">
						<option value="">请选择支付渠道</option>
						<option value="1">微信</option>
						<option value="2">支付宝</option>
						<option value="3">银行卡</option>
					</select>
                </div>
				<div style="float:left;padding-left:20px;padding-top:3px;">
					<div id="payChannelAlert" class="alert alert-yellow" style="width:100%;height:30px;padding:5px;visibility:hidden;">请选择支付渠道！</div>
                </div>
            </div>
            <div style="float:left;width:100%;padding-top:20px;padding-left:100px;">
            	<button class="button bg-main" style="width:80px;" id="addPayRecord" onclick="addPayRecord()">确定</button>
            </div>
        </div>
    </div>
</body></html>